<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增口令红包')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-bag-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">名称：</label>
                <div class="col-sm-8">
                    <input name="title" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">口令：</label>
                <div class="col-sm-8">
                    <input name="code" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">数量：</label>
                <div class="col-sm-8">
                    <input name="number" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">金额：</label>
                <div class="col-sm-8">
                    <input name="price" class="form-control" type="number">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">过期时间：</label>
                <div class="col-sm-8">
                    <input name="afterTime" type="text" class="form-control" id="selectTime" placeholder="请选择过期时间">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="remarks" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "lucky/bag"
        $("#form-bag-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-bag-add').serialize());
            }
        }
        $(function(){
            $("#datetimepicker-demo-1").datetimepicker();

            $("#datetimepicker-demo-2").datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true
            });

            $("#datetimepicker-demo-3").datetimepicker({
                format: "yyyy-mm-dd hh:ii:ss",
                autoclose: true
            });

            $('.form_date').datetimepicker({
                format: "yyyy-mm-dd",
                minView: "month",
                autoclose: true
            });

            $("#datetimepicker-startTime").datetimepicker({
                format: 'yyyy-mm-dd',
                minView: "month",
                todayBtn:  true,
                autoclose: true,
                endDate : new Date(),
            }).on('changeDate', function(event) {
                event.preventDefault();
                event.stopPropagation();
                var startTime = event.date;
                $('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
            });

            $("#datetimepicker-endTime").datetimepicker({
                format: 'yyyy-mm-dd',
                minView: "month",
                todayBtn:  true,
                autoclose: true,
                endDate : new Date(),
            }).on('changeDate', function(event) {
                event.preventDefault();
                event.stopPropagation();
                var endTime = event.date;
                $("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
            });

            layui.use('laydate', function(){
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#selectTime',
                    type: 'datetime',
                    trigger: 'click'
                });


                var startDate = laydate.render({
                    elem: '#laydate-startTime',
                    max: $('#laydate-endTime').val(),
                    theme: 'molv',
                    trigger: 'click',
                    done: function(value, date) {
                        // 结束时间大于开始时间
                        if (value !== '') {
                            endDate.config.min.year = date.year;
                            endDate.config.min.month = date.month - 1;
                            endDate.config.min.date = date.date;
                        } else {
                            endDate.config.min.year = '';
                            endDate.config.min.month = '';
                            endDate.config.min.date = '';
                        }
                    }
                });

                var endDate = laydate.render({
                    elem: '#laydate-endTime',
                    min: $('#laydate-startTime').val(),
                    theme: 'molv',
                    trigger: 'click',
                    done: function(value, date) {
                        // 开始时间小于结束时间
                        if (value !== '') {
                            startDate.config.max.year = date.year;
                            startDate.config.max.month = date.month - 1;
                            startDate.config.max.date = date.date;
                        } else {
                            startDate.config.max.year = '';
                            startDate.config.max.month = '';
                            startDate.config.max.date = '';
                        }
                    }
                });
            });
        });
    </script>
</body>
</html>